<!-- 新增/编辑最低工资 -->
<template>
  <a-modal
    width="40%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
    unmount-on-close
  >
    <template #title>
      <div>信息查看</div>
    </template>
    <a-form :model="formData.data" :rules="rules" ref="refForm">
      <a-form-item label="城市" field="cityCode" show-colon>
        <a-cascader
          :options="citiesJson"
          :field-names="{
            value: 'code',
            label: 'name'
          }"
          v-model="formData.data.cityCode"
          allow-search
          allow-clear
          style="width: 150px"
        />
      </a-form-item>
      <a-form-item label="类型" field="" show-colon>
        <a-input placeholder="最低工资"></a-input>
      </a-form-item>
      <a-form-item label="工资标准" field="wage" show-colon>
        <a-input-number
          :precision="2"
          :min="0"
          hide-button
          allow-clear
          v-model="formData.data.wage"
        >
          <template #append>
            <span>元/月</span>
          </template>
        </a-input-number>
      </a-form-item>
      <a-form-item label="启用日期" field="startDate" show-colon>
        <a-date-picker v-model="formData.data.startDate" />
      </a-form-item>
      <a-form-item label="结束日期" field="endDate" show-colon>
        <a-date-picker v-model="formData.data.endDate" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { CheckMiniSalaryRepeat } from '@/apis/management/salary/baseSetting';
import { TaddMiniSalary } from '@/apis/management/salary/baseSetting/type';
import citiesJson from '@/assets/json/pc-code.json';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    cityData: TaddMiniSalary | null; // 城市
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'addMiniSalaryEmit']);
let refForm = ref();

// 校验是否有重复的城市
const validateCityCode = async (val: string, cb: any) => {
  if (props.cityData?.id && val === props.cityData?.cityCode) {
    //
  } else {
    const data = {
      cityCode: val
    };
    const res = await CheckMiniSalaryRepeat(data);
    if (res.code) {
      cb(`${res.msg}`);
    }
  }
};

// 校验结束日期是否大于开始日期
const validateEndDate = async (val: string, cb: any) => {
  if (new Date(val) <= new Date(formData.data.startDate))
    cb('结束日期必须大于开始日期');
};

const rules = {
  cityCode: [
    {
      required: true,
      message: '请选择'
    },
    {
      validator: validateCityCode
    }
  ],
  wage: [
    {
      required: true,
      message: '请输入'
    }
  ],
  startDate: [
    {
      required: true,
      message: '请选择'
    }
  ],
  endDate: [
    {
      required: true,
      message: '请选择'
    },
    {
      validator: validateEndDate
    }
  ]
};

const formData = reactive<{
  data: TaddMiniSalary;
}>({
  data: {
    cityCode: '', // 城市
    wage: undefined, // 最低工资
    startDate: '', // 启用日期
    endDate: '' // 结束日期
  }
});
watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      if (props.cityData?.id) {
        formData.data = cloneDeep(props.cityData);
      } else {
        formData.data = {
          cityCode: '', // 城市
          wage: undefined, // 最低工资
          startDate: '', // 启用日期
          endDate: '' // 结束日期
        };
      }
    }
  }
);

// 保存
const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  } else {
    emit('addMiniSalaryEmit', formData.data);
    emit('update:visible', false);
  }
};

// 取消
const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="less">
:deep(.arco-input-append) {
  background-color: rgba(237, 239, 253, 0.447);
}
</style>
